<template>
  <div class="list-group page">
    <Header></Header>
    <div class="flex-row justify-content-between header">
      <div class="list-group justify-content-start self-center relative group">
        <div class="section"></div>
        <span class="text pos">{{ time }}</span>
      </div>
      <div>
        <img class="self-start image" src="/static/img/8f47caf228f38ddfbc8266f5908643aa.png" />
        <span>{{ powernum }}</span>
      </div>
    </div>
    <div class="list-group flex-auto group_2">
      <i class="icon-2x icon-unlock-alt"></i>
      <div class="list-group items-start group_3 space-y-18">
        <span class="text_2">修改密码</span>
      </div>
      <div class="list-group group_4 space-y-18">
        <div class="list-group space-y-20">
          <div class="list-group space-y-18">
            <div class="flex-row items-center section_2 space-x-16">
              <label for="userpwd">
                <img class="image_2" ref="icon3" src="/static/img/隐藏.svg" @click="reInput3" @mouseleave="hideInput" />
              </label>
              <div @click="option.show = true; option.flag = 2">
                <input name="oldpwd" ref="input3" v-model="oldpwd" type="password" class="input" placeholder="请输入原密码"
                  :disabled="true">
              </div>
            </div>
          </div>
        </div>
        <div class="list-group space-y-20">
          <div class="list-group space-y-18">
            <div class="flex-row items-center section_2 space-x-16">
              <label for="userpwd">
                <img class="image_2" ref="icon1" src="/static/img/隐藏.svg" @click="reInput1" @mouseleave="hideInput" />
              </label>
              <div @click="option.show = true; option.flag = 0">
                <input name="userpwd" ref="input1" v-model="userpwd" type="password" class="input" placeholder="请设置新密码"
                  :disabled="true">
              </div>
            </div>
          </div>
        </div>
        <div class="list-group space-y-20">
          <!-- <div class="list-group space-y-18">
            <div class="flex-row items-center section_2 space-x-16">
              <label for="comfirmpwd">
                <img class="image_2" ref="icon2" src="/static/img/隐藏.svg" @click="reInput2" @mouseleave="hideInput"/>
              </label>
              <input name="comfirmpwd" ref="input2" v-model="comfirmpwd" type="password" class="input" placeholder="请确认您的密码">
            </div>
          </div> -->
          <div class="list-group space-y-18">
            <div class="flex-row items-center section_2 space-x-16">
              <label for="userpwd">
                <img class="image_2" ref="icon2" src="/static/img/隐藏.svg" @click="reInput2" @mouseleave="hideInput" />
              </label>
              <div @click="option.show = true; option.flag = 1">
                <input name="comfirmpwd" ref="input2" v-model="comfirmpwd" type="password" class="input"
                  placeholder="请确认新密码" :disabled="true">
              </div>
            </div>
          </div>
          <span class="self-start font_1 font_red" v-if="warn">{{ warnsms }}</span>
        </div>
      </div>
      <div class="list-group group_7 space-y-17">
        <button type="" @click="signup" class="list-group justify-content-start items-center button">
          <span class="font_5 text_8">修改</span>
        </button>
      </div>
    </div>
    <div class="input_container" v-show="option.show">
      <Keyboard :option="option" @keyVal="getInputValue" @close="option.show = false"></Keyboard>
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Keyboard from './components/Keyboard.vue'
export default {
  components: { Keyboard, Header },
  data() {
    return {
      warnsms: '',
      warn: false,
      comfirmpwd: '',
      oldpwd: '',
      username: '',
      userpwd: '',
      phone: '',
      email: '',
      time: this.getTimes(),
      powernum: '',
      option: {
        show: false,
        flag: 0,
        sourceDom: ''
      }
    }
  },

  methods: {
    getInputValue(val) {
      switch (this.option.flag) {
        case 0: {
          if (val === 'delete') {
            this.userpwd = this.userpwd.slice(0, this.userpwd.length - 1)
          } else {
            this.userpwd += val
          }
          break
        }
        case 1: {
          if (val === 'delete') {
            this.comfirmpwd = this.comfirmpwd.slice(0, this.comfirmpwd.length - 1)
          } else {
            this.comfirmpwd += val
          }
          break
        }
        case 2: {
          if (val === 'delete') {
            this.oldpwd = this.oldpwd.slice(0, this.oldpwd.length - 1)
          } else {
            this.oldpwd += val
          }
        }
      }
    },
    onFocus() {
      this.$set(this.option, 'show', true)
      this.$set(this.option, 'sourceDom', this.$refs['keyboard'])
    },
    toLogin() {
      this.$router.push('/login')
    },
    getTimes() {
      let data = new Date()
      let minstr = data.getMinutes()
      let min = parseInt(minstr) < 10 ? '0' + minstr : minstr
      return data.getHours() + ':' + min
    },
    reInput1() {
      if (this.$refs.input1.type === 'password') {
        this.$refs.input1.type = 'text'
        this.$refs.icon1.src = '/static/img/显示.svg'
      } else {
        this.$refs.input1.type = 'password'
        this.$refs.icon1.src = '/static/img/隐藏.svg'
      }
    },
    reInput2() {
      if (this.$refs.input2.type === 'password') {
        this.$refs.input2.type = 'text'
        this.$refs.icon2.src = '/static/img/显示.svg'
      } else {
        this.$refs.input2.type = 'password'
        this.$refs.icon2.src = '/static/img/隐藏.svg'
      }
    },
    reInput3() {
      if (this.$refs.input3.type === 'password') {
        this.$refs.input3.type = 'text'
        this.$refs.icon3.src = '/static/img/显示.svg'
      } else {
        this.$refs.input3.type = 'password'
        this.$refs.icon3.src = '/static/img/隐藏.svg'
      }
    },
    hideInput() {
      this.$refs.input1.type = 'password'
      this.$refs.input2.type = 'password'
      this.$refs.icon2.src = '/static/img/隐藏.svg'
      this.$refs.icon1.src = '/static/img/隐藏.svg'
    },
    signup() {
      if (this.userpwd !== this.comfirmpwd || this.isEmpty(this.userpwd)) {
        this.innerHtml('请确认您的密码!')
      } else {
        this.warn = false
        this.post('modpwd', {
          userpwd: this.enc(this.userpwd),
          oldpwd: this.enc(this.oldpwd)
        }, { emulateJSON: true }).then((response) => {
          let ret = response.data
          this.alert(ret.msg, { type: 'success', placement: 'top' })
          if (ret.code === 1) {
            this.$store.commit('setToken', ret.data.token)
            this.$router.push({ path: '/user' })
          }
        })
      }
    },
    innerHtml(str) {
      this.warn = true
      this.warnsms = str
    }
  },
  created() {
    // 获取手机电量信息
    // charging: 是否在充电
    // chargingTime: 充满电还需要的时间(秒)
    // dischargingTime:  电池剩余可用时间(秒)
    // level: 剩余电量,最大电量就是1
    // onchargingchange:  充电状态改变时触发该监听函数
    // onchargingtimechange:  充满还需时间改变时触发该监听函数
    // ondischargingtimechange:  电池剩余可用时间改变时触发该监听函数
    // onlevelchange:  电量改变时触发该监听函数
    let power = {}
    let _this = this
    navigator.getBattery().then(function (battery) {
      power.isCharging = battery.charging
      power.level = battery.level
      power.needChargingTime = battery.chargingTime
      power.elseTime = battery.dischargingTime
      console.log('是否在充电? ' + (battery.charging ? 'Yes' : 'No'))
      console.log('剩余电量,最大电量是: ' + battery.level * 100 + '%')
      console.log('充满电还需要的时间(秒): ' + battery.chargingTime + ' seconds')
      console.log('电池剩余可用时间(秒): ' + battery.dischargingTime + ' seconds')
      battery.addEventListener('chargingchange', function () {
        console.log('充电状态改变时触发该监听函数? ' + (battery.charging ? 'Yes' : 'No'))
        power.isCharging = battery.charging
      })
      battery.addEventListener('levelchange', function () {
        console.log('电量改变时触发该监听函数: ' + battery.level * 100 + '%')
        power.level = battery.level
      })
      battery.addEventListener('chargingtimechange', function () {
        console.log('充满还需时间改变时触发该监听函数: ' + battery.chargingTime + ' seconds')
        power.needChargingTime = battery.chargingTime
      })
      battery.addEventListener('dischargingtimechange', function () {
        console.log('电池剩余可用时间改变时触发该监听函数: ' + battery.dischargingTime + ' seconds')
        power.elseTime = battery.dischargingTime
      })
      _this.powernum = battery.level * 100 + '%'
      console.log(power)
      console.log(_this.powernum)
    })
  }
}
</script>

<style scoped lang="scss">
.input {
  border: none;
  width: 80%;
  background-color: #F4F4F6;
}

input::placeholder {
  font-size: 0.88rem;
  font-family: Manrope;
  line-height: 0.84rem;
  color: #121826;
}

.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .header {
    padding: 0.5rem 0.88rem 0.5rem 1.38rem;
    height: 2.31rem;

    .group {
      padding-bottom: 0.38rem;
      width: 3.38rem;

      .section {
        background-color: #ffffff;
      }

      .text {
        color: #000000;
        font-size: 0.94rem;
        font-family: SFProText;
        font-weight: 600;
        line-height: 0.69rem;
        width: 2.13rem;
      }

      .pos {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }

    .image {
      margin-top: 0.63rem;
      width: 1.5rem;
      height: 0.72rem;
    }
  }

  .group_2 {
    padding: 1.44rem 1.38rem 3rem;
    overflow-y: auto;

    .image_2 {
      width: 1.13rem;
      height: 1rem;
      margin: 0 0 0.25rem 0.25rem;
    }

    .group_3 {
      margin-top: 1.5rem;
      padding: 0 0.13rem;

      .text_2 {
        color: #121826;
        font-size: 1.38rem;
        font-family: Manrope;
        font-weight: 700;
        line-height: 1.31rem;
      }

      .text_3 {
        color: #6c727f;
        line-height: 0.63rem;
      }
    }

    .space-y-18 {
      &>*:not(:first-child) {
        margin-top: 1.13rem;
      }

      .section_2 {
        padding: 0.5rem 0.5rem 0.3rem 0.5rem;
        background-color: #f4f4f6;
        border-radius: 1rem;

        .image_3 {
          width: 1.5rem;
          height: 1.5rem;
        }

        .image_2 {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
    }

    .group_4 {
      margin-top: 2.5rem;

      .space-y-20 {
        &>*:not(:first-child) {
          margin-top: 1.25rem;
        }
      }

      .group_5 {
        margin-right: 0.75rem;

        .image_5 {
          border-radius: 0.25rem;
          width: 1.13rem;
          height: 1.13rem;
        }

        .group_6 {
          line-height: 0.88rem;
          height: 1.75rem;

          .font_4 {
            font-size: 0.75rem;
            font-family: Manrope;
            line-height: 0.84rem;
          }

          .text_6 {
            color: #6c727f;
            line-height: 0.88rem;
          }

          .text_7 {
            color: #4a44c6;
            font-weight: 700;
            line-height: 0.88rem;
          }
        }
      }
    }

    .font_1 {
      font-size: 0.88rem;
      font-family: Manrope;
      line-height: 0.66rem;
      color: #121826;
    }

    .space-x-16 {
      &>*:not(:first-child) {
        margin-left: 0.5rem;
      }
    }

    .group_7 {
      margin-top: 2rem;

      .button {
        padding: 1.5rem 0;
        background-color: #928fff;
        border-radius: 1.5rem;

        .text_8 {
          color: #ffffff;
          line-height: 0.94rem;
        }
      }

      .space-x-14 {
        &>*:not(:first-child) {
          margin-left: 0.88rem;
        }

        .equal-division-item {
          padding: 1rem;
          border-radius: 1.5rem;
          height: auth;

          // border: solid 0.094rem #f4f4f6;
          .image_6 {
            width: 1.25rem;
          }
        }

        .space-x-12 {
          &>*:not(:first-child) {
            margin-left: 0.75rem;
          }
        }
      }

      .font_5 {
        font-size: 1rem;
        font-family: Manrope;
        line-height: 1.25rem;
        font-weight: 700;
        color: #121826;
      }

      .group_8 {
        line-height: 0.84rem;

        .font_3 {
          font-size: 0.88rem;
          font-family: Manrope;
          line-height: 0.84rem;
          font-weight: 700;
          color: #4a44c6;
        }

        .text_9 {
          line-height: 0.81rem;
        }
      }
    }

    .space-y-17 {
      &>*:not(:first-child) {
        margin-top: 1.06rem;
      }
    }

    .font_2 {
      font-size: 0.88rem;
      font-family: Manrope;
      line-height: 0.84rem;
      color: #121826;
    }
  }
}
</style>
